<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="flex mt24">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">包材库存查询</span>
        </div>
        <div>
          <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="500" />
          <div class="mt15 f12 mb36">
            <span class="mr10">材料名称</span
            ><el-input class="mr55" v-model="materialNameVal" placeholder="" size="small" clearable @change="" style="width: 331px"></el-input>
          </div>
        </div>
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '0 0 0 60px' }">
        <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">入库明细查询</span>
          </div>
          <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="245" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">出库明细查询</span>
          </div>
          <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="245" />
        </el-card>

        <div class="btns">
          <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
          <el-button type="primary" size="default" @click="">打印</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackageMaterialInventoryInquiry'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入物料编码',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '入库日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '收获日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料规格',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '分类',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '3',
        optionValue: '333333',
        optionLabel: 'option3'
      },
      {
        optionKey: '4',
        optionValue: '44444',
        optionLabel: 'option4'
      },
      {
        optionKey: '5',
        optionValue: 'option5',
        optionLabel: 'option5'
      },
      {
        optionKey: '6',
        optionValue: 'option6',
        optionLabel: 'option6'
      },
      {
        optionKey: '7',
        optionValue: 'option7',
        optionLabel: 'option7'
      },
      {
        optionKey: '8',
        optionValue: 'option8',
        optionLabel: 'option8'
      },
      {
        optionKey: '9',
        optionValue: 'option9',
        optionLabel: 'option9'
      },
      {
        optionKey: '10',
        optionValue: 'option10',
        optionLabel: 'option10'
      },
      {
        optionKey: '11',
        optionValue: 'option11',
        optionLabel: 'option11'
      },
      {
        optionKey: '12',
        optionValue: 'option12',
        optionLabel: 'option12'
      },
      {
        optionKey: '13',
        optionValue: 'option13',
        optionLabel: 'option13'
      },
      {
        optionKey: '14',
        optionValue: 'option14',
        optionLabel: 'option14'
      },
      {
        optionKey: '15',
        optionValue: 'option15',
        optionLabel: 'option15'
      },
      {
        optionKey: '16',
        optionValue: 'option16',
        optionLabel: 'option16'
      },
      {
        optionKey: '17',
        optionValue: 'option17',
        optionLabel: 'option17'
      },
      {
        optionKey: '18',
        optionValue: 'option18',
        optionLabel: 'option18'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'checkbox',
    checkboxLabel: '库存',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '大于0',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '等于0',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '全部',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const tableHeader = ref([
  {
    label: '物料编码',
    sortable: true,
    prop: 'materialCode'
  },
  {
    label: '材料颜色',
    prop: 'materialColor'
  },
  {
    label: '材料名称',
    prop: 'materialName',
    sortable: true
  },
  {
    label: '规格',
    prop: 'specification'
  },
  {
    label: '单位',
    prop: 'unit'
  },
  {
    label: '入库日期',
    prop: 'storageDate',
    sortable: true
  },
  {
    label: '发料日期',
    prop: 'deliveryDate',
    sortable: true
  },
  {
    label: '入库数量',
    prop: 'storageQuantity'
  },
  {
    label: '发料数量',
    prop: 'deliveryQuantity'
  },
  {
    label: '库存数量',
    prop: 'inventoryQuantity'
  }
])
const tableData = ref([
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  },
  {
    materialCode: '111111',
    materialColor: '111111',
    materialName: '111111',
    specification: '111111',
    unit: '111111',
    storageDate: '111111',
    deliveryDate: '111111',
    storageQuantity: '111111',
    deliveryQuantity: '111111',
    inventoryQuantity: '111111'
  }
])

const tableHeader2 = ref([
  {
    label: '指令',
    prop: 'instruction',
    width: '92'
  },
  {
    label: '厂商',
    prop: 'manufacturer',
    width: '92'
  },
  {
    label: '日期',
    prop: 'date',
    width: '92'
  },
  {
    label: '单据号码',
    prop: 'billNumber',
    width: '92'
  },
  {
    label: '单据类型',
    prop: 'billType',
    width: '92'
  },
  {
    label: '数量',
    prop: 'quantity',
    width: '92'
  }
])
const tableData2 = ref([
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    manufacturer: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  }
])

const tableHeader3 = ref([
  {
    label: '指令',
    prop: 'instruction',
    width: '92'
  },
  {
    label: '部门',
    prop: 'department',
    width: '92'
  },
  {
    label: '日期',
    prop: 'date',
    width: '92'
  },
  {
    label: '单据号码',
    prop: 'billNumber',
    width: '92'
  },
  {
    label: '单据类型',
    prop: 'billType',
    width: '92'
  },
  {
    label: '数量',
    prop: 'quantity',
    width: '92'
  }
])
const tableData3 = ref([
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  },
  {
    instruction: '111111',
    department: '111111',
    date: '111111',
    billNumber: '111111',
    billType: '111111',
    quantity: '111111'
  }
])
const materialNameVal = ref('')
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: end;
  margin: 10px 20px 10px;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}
</style>
